  <template>
  <div class="layout-container" :class="{ old: elder }">
    <div class="layout-section layout-section2">
      <top-header :show-elder="false" :auth-check="false"  @setElder="setElderByChild"></top-header>

      <div class="home-tabs home-tabs2">
        <ul class="home-tabs-header">
          <li
            class="home-tab-title"
            :class="{ active: homeTab === 0 }"
            @click="homeTab = 0"
          >
            <span>查询总数</span>
          </li>
          <li
            class="home-tab-title"
            :class="{ active: homeTab === 1 }"
            @click="homeTab = 1"
          >
            <span>本月查询</span>
          </li>
          <li
            class="home-tab-title"
            :class="{ active: homeTab === 2 }"
            @click="homeTab = 2"
          >
            <span>今日查询</span>
          </li>
        </ul>
        <div class="home-tabs-body">
          <div class="home-tab-body active" v-show="homeTab === 0">
            <div class="tab_main">
              <div class="data_icon">&nbsp;</div>
              <div class="data_all">{{ getTotal(total) }}</div>
              <div class="data_all2">其中移动端：{{ getTotalMb(total) }}</div>
            </div>
            <div class="tab_main lw_flex">
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in total" :key="row.AREANAME" v-if="index % 2 === 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in total" :key="row.AREANAME" v-if="index % 2 !== 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
            </div>
          </div>
          <div class="home-tab-body" v-show="homeTab === 1">
            <div class="tab_main">
              <div class="data_icon data_icon2">&nbsp;</div>
              <div class="data_all">{{ getTotal(month) }}</div>
              <div class="data_all2">其中移动端：{{ getTotalMb(month) }}</div>
            </div>
            <div class="tab_main lw_flex">
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in month" :key="row.AREANAME" v-if="index % 2 === 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in month" :key="row.AREANAME" v-if="index % 2 !== 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
            </div>
          </div>
          <div class="home-tab-body" v-show="homeTab === 2">
            <div class="tab_main">
              <div class="data_icon data_icon3">&nbsp;</div>
              <div class="data_all">{{ getTotal(today) }}</div>
              <div class="data_all2">其中移动端：{{ getTotalMb(today) }}</div>
            </div>
            <div class="tab_main lw_flex">
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in today" :key="row.AREANAME" v-if="index % 2 === 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
              <div class="data_list">
                <div class="list_txt" v-for="(row,index) in today" :key="row.AREANAME" v-if="index % 2 !== 0">{{ row.AREANAME }}：{{ row.COUNTTOTAL }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <footer-right></footer-right>
    </div>

    <footer-nav :active-index="1"></footer-nav>
  </div>
</template>

<script>
import FooterRight from "@/components/footerRight";
import FooterNav from "@/components/footerNav";
import TopHeader from "@/components/topHeader";

import { getStatis } from "@/api/eraqStatis"

export default {
  components: {TopHeader, FooterNav, FooterRight},
  data() {
    return {
      total: [],
      month: [],
      today: [],
      homeTab: 0,
      elder: false,
    }
  },
  methods: {
    getTotal: function (rows) {
      var total = 0;
      rows.forEach(row => {
        total += row.COUNTTOTAL;
      });
      return total;
    },
    getTotalMb: function (rows) {
      var total = 0;
      rows.forEach(row => {
        total += row.COUNTMOBILE;
      });
      return total;
    },
    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    }
  },
  mounted() {
    getStatis().then(res=>{
      if (res.msg !== "") {
        this.$eraqDlg.error(res.msg);
        this.total = [];
        this.month = [];
        this.today = [];
        return;
      }
      this.total = res.data.total;
      this.month = res.data.month;
      this.today = res.data.today;
    }).catch(()=>{});
  }
}
</script>

<style lang='scss' scoped>
@import "src/css/home";
@import "src/css/jzy";
</style>
